import { reqGetHospitalShow } from "@/api/hospital/hospitalList";
import type { HospitalShow as HospitalType } from "@/api/hospital/model/hospitalListTypes";
import { Button, Card, Descriptions } from "antd";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

export default function HospitalShow() {

  //获取医院的 id 参数
  let {id} = useParams();
  //声明状态
  let [hospital, setHospital] = useState<HospitalType>();

  let getHospital = async () => {
    //获取医院的数据
    let res = await reqGetHospitalShow(id as string);
    //设置hospital的状态
    setHospital(res);
  }
  //组件挂载完毕的回调
  useEffect(() => {
    getHospital();
  }, []);
  //获得 navigate 函数
  let navigate = useNavigate();

  return (
    <Card>
      <Descriptions title="基本信息" bordered>
        <Descriptions.Item style={{width:'160px'}} label="医院名称" span={1}>{hospital?.hospital.hosname}</Descriptions.Item>
        <Descriptions.Item label="医院 logo" span={2}><img width="80" src={'data:image/jpeg;base64,' + hospital?.hospital.logoData} /></Descriptions.Item>
        <Descriptions.Item label="医院编码" span={1}>{hospital?.hospital.hoscode}</Descriptions.Item>
        <Descriptions.Item label="医院地址" span={2}>
          {hospital?.hospital.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="乘车路线" span={3}>
          {hospital?.hospital.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={3}>
          {hospital?.hospital.intro}
        </Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>
      
      <Descriptions title="预约规则信息" bordered>
        <Descriptions.Item label="预约周期" span={1}>{hospital?.bookingRule.cycle}</Descriptions.Item>
        <Descriptions.Item label="放号时间" span={2}>{hospital?.bookingRule.releaseTime}</Descriptions.Item>
        <Descriptions.Item label="停挂时间" span={1}>{hospital?.bookingRule.stopTime}</Descriptions.Item>
        <Descriptions.Item label="退号时间" span={2}>
          {hospital?.bookingRule.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={3}>
        {hospital?.bookingRule.rule.map((item, index) => {
          return <p key={index}>{item}</p>
        })}
        </Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>
      <Button onClick={() => navigate(-1)}>返回</Button>
    </Card>
  );
}
